<template>
    <view class="cash-out-audit pd-v-24">


        <view class="cash-out-audit__header">
            <u--form
                labelWidth="80"
                labelPosition="left"
                :model="form"
            >
                <view class="border8 pd-l-24 bg-white mr-t-20">
                    <u-form-item
                        label="状态"
                        prop="status"
                        borderBottom
                        @click="showPicker = true"
                    >
                        <u--input
                            v-model="form.status"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请选择状态"
                            readonly
                            suffixIcon="arrow-down"
                            :suffixIconStyle="{marginRight:'18rpx'}"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="时间"
                        prop="timeRange"
                        borderBottom
                        @click="showDatePicker"
                    >
                        <u--input
                            v-model.trim="form.timeRange"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请选择日期"
                            suffixIcon="calendar"
                            readonly
                            :suffixIconStyle="{marginRight:'12rpx',fontSize:'50rpx'}"
                        ></u--input>
                    </u-form-item>
                </view>
            </u--form>

            <view class="mr-t-20 pd-v-36 pd-h-22 position-r flex flex-center">
                <image src="@/static/img_txsh.png" class="position-a full-w full-h left0 top0" mode="aspectFill"></image>
                <view class="font32 lh-44 color-white mr-r-14 position-r">金额统计</view>
                <view class="font32 lh-44 color-yellow position-r">¥{{statistics}}</view>
            </view>
        </view>
          
        
        <view class="cash-out-audit__body">
            <u-checkbox-group v-model="checkedList" @change="checkedChange">
                <view class="full-w pd-l-8 pd-r-24 pd-h-24 border8 bg-white mr-t-12 flex flex-center" v-for="(item,itemIndex) in list" :key="itemIndex+'itemIndex'">
                    <u-checkbox :disabled="item.status != 0" :name="item.id" shape="circle" activeColor="#35BE65"></u-checkbox>
                    <view class="flex-1 mr-l-8">
                        <view class="flex flex-center">
                            <view class="flex-1 font32 lh-44 color-default bold">
                                {{ item.withdrawalUserName }}
                            </view>
                            <view class="color-main font26 lh-36" :class='{"color-red": item.status == "2" ? true : false, "color-main" : (item.status == "1"  || item.status == "3") ? true : false, "color-yellow" : item.status == "0" ? true : false }'>
                                {{item.status == 0 ? '待审核' : item.status == '1' ? '通过' : item.status == '2' ? '驳回' : item.status == '3' ? '已打款' : ''}}
                            </view>
                        </view>
                        <view class="flex mr-t-16 flex-center">
                            <view class="flex-1 font26 lh-36 color-note">
                                {{item.createTime}}
                            </view>
                            <view class="color-default font26 lh-36">￥{{item.withdrawalPrice}}</view>
                        </view>
                    </view>
                </view>
            </u-checkbox-group>
        </view>

        
        <view class="cash-out-audit__footer position-f full-w box pd-v-24 pd-h-16 bg-white">
            <view class="flex flex-center">
                <view class="flex-1">
                    <u-checkbox-group class="full-w" v-model="allChecked" @change="allCheckedChange">
                        <u-checkbox
                            shape="circle"
                            activeColor="#35BE65"
                            :name="'all'"
                            label="全选"
                        >
                        </u-checkbox>
                    </u-checkbox-group>
                </view>

                <u-button type="primary" :customStyle="{height:'76rpx',marginLeft:'16rpx',width:'276rpx'}" shape="circle" color="#272636"  text="驳回" @click="reject"></u-button>
                
                <u-button type="primary" :customStyle="{height:'76rpx',marginLeft:'16rpx',width:'208rpx'}" shape="circle" color="#35BE65"  text="通过" @click="agress"></u-button>
            </view>
              
              
        </view>

        <u-calendar 
            mode="range"
            :defaultDate="calendar.defaultDate"
            :maxDate="calendar.maxDate"
            :minDate="calendar.minDate"
            :monthNum="calendar.monthNum" 
            :show="show" @close="show = false;" @confirm="timeConfirm"></u-calendar>

        <u-picker :show="showPicker" :columns="columns" keyName="label" :closeOnClickOverlay="true" @cancel="showPicker = false" @close="showPicker = false" @confirm="pickerConfirm"></u-picker>

    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app';
import { withdrawalReviewList,receiptStatistics,changeStatus } from '@/api/proxy.js'


const store = useStore();


const form = ref({
    status: '全部',
    timeRange: '',
    searchStartTime:'',
    searchEndTime:'',
});
const show = ref(false);
const showPicker = ref(false);
const columns = ref([
    [{label:'全部',status:''},{label:'待审核',status:'0'},{label:'通过',status:'1'},{label:'驳回',status:'2'},{label:'已打款',status:'3'}]
])

const checkedList = ref([])
const allChecked = ref(false)
const list = ref([])
const total = ref(0)
const params = ref({
    pageNum: 1,
    pageSize: 10
})
const statistics = ref(0)
const calendar = ref({
    minDate: '',
    maxDate: '',
    defaultDate: '',
    monthNum: 13,
})


onShow(() => {
    
})

onLoad(() => {
    getWithdrawalList()
    getReceiptStatistics()
    chooseTimed()
})

onReachBottom(() => {
    if(list.value.length < total.value) {
        params.value.pageNum++;
        getWithdrawalList()
    }

})


const chooseTimed = () => {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month <= 9) {
    month = '0' + month;
    }
    if (day <= 9) {
    day = '0' + day;
    }
    let minyear = year - 1;
    calendar.value.minDate = minyear + '-' + month + '-' + day;
    calendar.value.maxDate = year + '-' + month + '-' + day;
    calendar.value.defaultDate = year + '-' + month + '-' + day;
}

const reject = () => {
    if(checkedList.value.length == 0) {
        uni.showToast({
            title: '请选择要驳回的订单',
            icon: 'none'
        })
        return
    }
    uni.showModal({
        title: '提示',
        content: '确定驳回吗？',
        success: function (res) {
            if (res.confirm) {
                setChangeStatus(2)
                params.value.pageNum = 1
                getWithdrawalList()
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
}

const agress = () => {
    if(checkedList.value.length == 0) {
        uni.showToast({
            title: '请选择要通过的订单',
            icon: 'none'
        })
        return
    }
    uni.showModal({
        title: '提示',
        content: '确定通过吗？',
        success: function (res) {
            if (res.confirm) {
                setChangeStatus(1)
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
    
}


const setChangeStatus = (status) => {
    let newparams = {
        "withdrawalIdList": [...checkedList.value],
        "status": status
    }
    changeStatus(newparams).then(res => {
        if(res.code == 200) {
            uni.showToast({
                title: '操作成功'
            })

            
            checkedList.value = []
            params.value.pageNum = 1
            list.value = []
            allChecked.value = false
            getWithdrawalList()
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            })  
        }
    })
}
const getReceiptStatistics = () => {
    receiptStatistics({
      searchStartTime:form.value.searchStartTime,
      searchEndTime:form.value.searchEndTime
    }).then(res => {
        if(res.code == 200) {
            statistics.value = res.data
        }
    })
}

const checkedChange = (e) => {
    console.log(e,'eeeee')
}

const allCheckedChange = (e) => {
    if(e.length) {
        checkedList.value = [];
        
        list.value.forEach(item => {
            if(item.status == 0) {
                checkedList.value.push(item.id)
            }
            
        })
    } else {
        checkedList.value = []
    }
}

const getWithdrawalList = () => {
    let param = {...params.value}
    let statusItem = columns.value[0].find(item => item.label == form.value.status)
    if(statusItem) {
         param.status = statusItem.status
    }
   
    withdrawalReviewList({...form.value,...param}).then(res => {
        if(res.code == 200) {
            list.value = [...list.value,...res.rows]
            total.value = res.total; 
        }
    })
}

const showDatePicker = () => {
    console.log('showDatePicker');
    show.value = true;
};

const timeConfirm = (e) => {
    console.log('confirm', e);
    form.value.timeRange = e[0] +'~'+ e[e.length-1];
    form.value.searchStartTime = e[0] + ' 00:00:00';
    form.value.searchEndTime = e[e.length-1] + ' 23:59:59';
    show.value = false;
    list.value = []
    params.value.pageNum = 1
    getWithdrawalList()
    getReceiptStatistics()
};

const pickerConfirm = (e) => {
    console.log('confirm', e);
    let statusItem = columns.value[0].find(item => item.status == e.value[0].status)
    console.log(statusItem)
    if(statusItem) {
        form.value.status = statusItem.label
    }
    
    showPicker.value = false;
    list.value = []
    params.value.pageNum = 1
    getWithdrawalList()
    getReceiptStatistics()
};

</script>

<style scoped lang="scss">
.cash-out-audit {
    
    background:#F7F7F7;
    min-height:100vh;
    padding-bottom:60rpx;


    .income-total {
        background: #F8FFF8;
    }

    .shop-total {
        background: #FFFAF8;
    }

    .cash-out-audit__body{
        
        padding-bottom:220rpx;
    }

    .cash-out-audit__footer {
        box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.05);
        z-index: 10;
        left:0;
        bottom:0;
        height: 176rpx;
    }
}
</style>
